<template>
    <div id = "menu-second">
      <menu-layer v-ref:menulayer :menu-items.sync ="menuItems"
      :is-show-sub-menu.sync = "showMenuThird">
      </menu-layer>

      <menu-third id = "menu-third" v-ref:menuthird v-echo-page page-name="menu/*/*"
      v-show = "showMenuThird">
      </menu-third>
    </div>
</template>

<script>
  import * as menuLayer from './menu-layer.vue'
  import * as menuThird from './menu-third.vue'
  import * as EchoKey from '../utils/echo-key'

  export default {
    components: {
      menuLayer,
      menuThird
    },
    data () {
      return {
        showMenuThird: false,
        menuItems: []
      }
    },
    props: {
      isShowSecond: {
        type: Boolean,
        twoWay: true
      }
    },
    [EchoKey.UP] (evt) {
      this.$refs.menulayer.$emit(EchoKey.UP, evt)
    },
    [EchoKey.DOWN] (evt) {
      this.$refs.menulayer.$emit(EchoKey.DOWN, evt)
    },
    [EchoKey.LEFT] (evt) {
      this.$refs.menulayer.$emit(EchoKey.LEFT, evt)
    },
    [EchoKey.RIGHT_ENT] (evt) {
      evt.vm = this.$refs.menuthird
      this.$refs.menulayer.$emit(EchoKey.RIGHT_ENT, evt)
    },
    [EchoKey.FUNC] (evt) {
      if (this.showMenuThird === true) {
        evt.vm = this.$refs.menuthird
      }
      this.$refs.menulayer.$emit(EchoKey.FUNC, evt)
    }
  }
</script>

<style land = "less">
  #menu-second {
    display: flex;
    white-space: nowrap;
    float: right;
    position: relative;
    left: -160px;
    /*top: -200px;*/
    width: 520px;
  }

</style>
